<template>
  <div class="container">
    <!-- Top banner with background image and text -->
    <div class="top-banner">
      <div class="banner-text">
        <p class="title">行业协同</p>
        <p class="subtitle">基于工业互联网二级节点标识解析体系，建设二级节点服务平台</p>
      </div>
    </div>

    <!-- Middle section with nodes -->
    <div class="nodes-section">
      <div class="nodes-container">
        <div
            v-for="(node, i) in nodes"
            :key="i"
            class="node-item"
            @mouseenter="hoverNode(i)"
            @mouseleave="unhoverNode(i)"
            :style="{ transform: hoverIndex === i ? 'translateX(10px)' : 'translateX(0)' }"
        >
          <!-- <div class="node-text" >◆{{ node }}</div> -->
          <div class="node-text">
            <a :href="node[1]" style="text-decoration: none; color: inherit;" >◆ {{ node[0] }}</a>
          </div>
          <div class="node-line"></div>
        </div>
      </div>
    </div>

    <!-- Main content section -->
    <div class="main-content">
      <p class="intro-text">面向广大中小企业提供</p>
      <p class="saas-title">
        <span class="saas-highlight">SAAS超市</span>在线使用
      </p>

      <el-row :gutter="30" class="features">
        <el-col :span="8" v-for="feature in features" :key="feature.title">
          <div class="feature-card">
            <div class="feature-icon">
              <!-- Replace with your actual SVG -->
              <svg width="60" height="60" viewBox="0 0 24 24" fill="#1837c6">
                <path d="M12 2L1 12h3v9h6v-6h4v6h6v-9h3L12 2z"/>
              </svg>
            </div>
            <h3 class="feature-title">{{ feature.title }}</h3>
            <p class="feature-desc">{{ feature.description }}</p>
            <el-button class="feature-btn">查看分类应用</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="additional-images">
      <img src="../assets/industrySynergy/u3186.png" alt="Description" class="image-800">
      <img src="../assets/industrySynergy/u3190.png" alt="Description" class="image-660">
    </div>
    <contact-footer></contact-footer>
  </div>
</template>

<script>
import ContactFooter from "@/view/homeComponents/banner.vue";

export default {
  components: {ContactFooter},
  data() {
    return {
      nodes: [
        ['迈迪智能二级节点','https://sso.mdslyun.com/Acount/Login'],
        ['大连大数据二级节点', window.location.href],
        ['盘锦二级节点', 'https://sso.node327.com/#/login'],
        ['鞍钢二级节点', window.location.href],
        ['沈鼓二级节点', window.location.href]
		
        // ['鞍钢二级节点','https://admin.ansteelnode.com/'],
        // ['沈鼓二级节点','https://sso.zdyl.shengu.com/']
      ],
      hoverIndex: null,
      features: [
        {
          title: 'SaaS应用类',
          description: '实现产品入网、设备上云、服务协同、推动工业数据共享，建设开发者生态'
        },
        {
          title: 'PaaS平台类',
          description: '实现产品入网、设备上云、服务协同、推动工业数据共享，建设开发者生态。'
        },
        {
          title: '大数据类',
          description: '实现产品入网、设备上云、服务协同、推动工业数据共享，建设开发者生态。'
        }
      ]
    }
  },
  methods: {
    hoverNode(index) {
      this.hoverIndex = index
    },
    unhoverNode() {
      this.hoverIndex = null
    }
  }
}
</script>

<style scoped>
.container {
  font-family: 'Microsoft YaHei', sans-serif;
}

/* Top banner styles */
.top-banner {
  height: 200px;
  background-image: url('../assets/industrySynergy/u3183_state0.png');
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center; /* This ensures vertical centering */
  position: relative;
}

.banner-text {
  text-align: left;
  color: white;
  padding: 10px;
  margin-left: 7%; /* Adjust this percentage to move text left/right */
  width: 80%; /* Ensure text doesn't span full width */
}

.title {
  font-size: 48px;
  font-weight: 400;
  margin-bottom: 10px;
  color: #333;
}

.subtitle {
  font-size: 24px;
  font-weight: 400;
  color: #7F7F7F;
}

/* Nodes section styles */
.nodes-section {
  background-image: url('../assets/industrySynergy/u3191_state0.png');
  background-size: cover;
  background-position: center;
  height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nodes-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 40px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.node-item {
  color: white;
  text-align: left;
  padding-left: 10%;
  transition: transform 0.2s ease;
  cursor: pointer;
  margin-bottom: 35px;
  width: 100%;
}

.node-text {
  font-size: 22px;
  margin-bottom: 10px;
}

.node-line {
  height: 1px;
  width: 30%;
  background: white;
  margin-top: 20px;
}

/* Main content styles */
.main-content {
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 20px;
}

.intro-text {
  font-size: 16px;
  color: #7F7F7F;
  margin-bottom: 10px;
}

.saas-title {
  font-size: 40px;
  margin-bottom: 30px;
}

.saas-highlight {
  color: #1837c6;
}

/* Feature cards styles */
.features {
  margin-top: 30px;
}

.feature-card {
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 30px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: box-shadow 0.3s;
}

.feature-card:hover {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.feature-icon {
  margin-bottom: 20px;
}

.feature-title {
  font-size: 24px;
  margin-bottom: 15px;
  color: #333;
}

.feature-desc {
  color: #666;
  margin-bottom: 20px;
  line-height: 1.6;
}

.feature-btn {
  background-color: #1837c6;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.feature-btn:hover {
  background-color: #142fa8;
}
.additional-images {
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

.image-800 {
  height: 800px;
 width: 100%;
  object-fit: cover;
}

.image-660 {
  height: 660px;
 width: 100%;
}
</style>